import { Component, ReactNode } from "react";
import { Input, View } from "@tarojs/components";
import { AtButton, AtList, AtListItem, AtNavBar } from "taro-ui";
import Taro from "@tarojs/taro";
import Req from "../../utils/request";
import './index.scss'
export default class AccountForm extends Component {
  state = {
    name: "",
    code: "",
  };
  get editId() {
    const { router } = Taro.getCurrentInstance();
    return router?.params.payeeId ?? "";
  }
  get lid() {
    const { router } = Taro.getCurrentInstance();
    return router?.params?.lid ?? "";
  }
  componentDidMount(): void {
    this.initData();
  }

  initData = () => {
    const { router } = Taro.getCurrentInstance();
    const { name = "", code }: any = router?.params;
    this.setState({
      name: name ? decodeURIComponent(name) : "",
      code,
    });
  };
  render(): ReactNode {
    const { name, code } = this.state;

    return (
      <View>
        <AtNavBar
          leftIconType="chevron-left"
          leftText="返回"
          color="#3051BE"
          onClickLeftIcon={() => {
            // Taro.navigateBack();
            Taro.navigateBack();
          }}
        >
          <View>{"账户信息"}</View>
        </AtNavBar>
        <AtList>
          <AtListItem
            className="form-list-item no-active-effect-item"
            title={"开户行"}
            note={
              <View>
                <Input
                  value={name}
                  onInput={(e) => {
                    this.setState({
                      name: e.detail.value,
                    });
                  }}
                />
              </View>
            }
          ></AtListItem>
          <AtListItem
            title={"银行账号"}
            className="form-list-item  no-active-effect-item"
            note={
              <View>
                <Input
                  value={code}
                  onInput={(e) => {
                    this.setState({
                      code: e.detail.value,
                    });
                  }}
                />
              </View>
            }
          ></AtListItem>
        </AtList>

          <AtButton
            className="primary-btn-color bottom-btn"
            circle
            type="primary"
            onClick={() => {
              if (this.lid) {
                Req.post("/config/payee/bank/edit", {
                  payeeId: this.editId,
                  name,
                  code,
                  id: this.lid,
                }).then((r) => {
                  Taro.navigateBack();
                });
              } else {
                Req.post("/config/payee/bank/add", {
                  payeeId: this.editId,
                  name,
                  code,
                }).then((r) => {
                  Taro.navigateBack();
                });
              }
            }}
          >
            提交
          </AtButton>
      </View>
    );
  }
}
